<template>
	<view>
		<u-navbar back-icon-color="#f1f1f1" title-color="#f1f1f1" title="交易明细" :background="navbarBackground"></u-navbar>
		<view class="main">
			<view class="record" v-if="moneyLog.length > 0">
				<view class="record-item" v-for="(item, index) in moneyLog" :key="index">
					<view class="left">
						<text class="title" v-if="item.type == 1">定金</text>
						<text class="title" v-if="item.type == 2">充值</text>
						<text class="title" v-if="item.type == 3">提现</text>
						<text class="title" v-if="item.type == 4">红包支出</text>
						<text class="title" v-if="item.type == 5">红包收益</text>
						<text class="time">{{ item.create_time }}</text>
					</view>
					<text>{{ (item.type == 2 || item.type == 5 ? '+' : '-') + item.money }}</text>
				</view>
			</view>
			<view v-else class="else"><text>暂无记录</text></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navbarBackground: {
				backgroundImage: 'linear-gradient(90deg, rgb(27,52,92), rgb(49,84,142))'
			},
			moneyLog: []
		};
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		// 获取交易记录
		this.$tkRequest('/api/User/moneyLog').then(res => {
			this.moneyLog = res.data;
		});
	}
};
</script>

<style lang="scss" scoped>
.main {
	margin: $uni-spacing-col-base 0;

	.record {
		.record-item {
			margin: 2rpx 0;
			padding: $uni-spacing-col-lg $uni-spacing-row-lg;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 14pt;

			.left {
				display: flex;
				flex-direction: column;

				.title {
					font-size: 13pt;
				}
				.time {
					font-size: 10pt;
					color: #999;
				}
			}
		}
	}

	.else {
		padding: 10vh 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
